<template>
    <div class="pl15 pr15">
        <el-table
            :data="tickerDate"
            style="width: 100%;"
            class="ticker-table"
            row-class-name="cursor-pointer"
            stripe
            @sort-change="sortChange"
        >
            <el-table-column
                prop="symbol"
                label="Coin"
                width="60"
            />
            <el-table-column
                label="Price"
                align="right"
                prop="upbitClosePrice"
                :sort-orders="sortOrders"
                sortable
            >
                <template #default="{row}">
                    <span class="text-upbit">
                        ￦{{ thousandSeparate(precision(row?.upbit?.closePrice, 0)) }}
                    </span><br>
                    <span class="text-binance">${{ thousandSeparate(precision(row?.binance?.closePrice)) }}</span>
                </template>
            </el-table-column>

            <el-table-column
                label="Volume"
                align="right"
                prop="upbitVolume"
                :sort-orders="sortOrders"
                sortable
            >
                <template #default="{row}">
                    {{ thousandSeparate(precision(row?.upbit?.volume, 0)) }}<br>
                    <span :class="{'text-up': row?.upbit?.priceChangePercent > 0, 'text-down': row?.upbit?.priceChangePercent < 0}">
                        {{ precision(row?.upbit?.priceChangePercent * 100) }}%
                    </span>
                </template>
            </el-table-column>
            <el-table-column
                label="Kimchi"
                align="right"
                prop="rate"
                :sort-orders="sortOrders"
                sortable
            >
                <template #default="{row}">
                    <div v-animation="row.diff.rate">
                        ￦{{ `${thousandSeparate(precision(row.diff.value, 0))}` }}<br>
                        <span :class="{'text-up': row.diff.rate > 0, 'text-down': row.diff.rate < 0}">
                            {{ `${precision(row.diff.rate)}%` }}
                        </span>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import types from '@/store/types';
import { thousandSeparate, precision } from '@/utils/tools';

const { dispatch, state } = useStore();
const sort = ref('');
const sortOrders = ref(['descending', 'ascending', null]);
const krwRate = computed(() => state.ws.usdRate);
const tickerDate = computed(() => {
    if (state.ws.tickerData) {
        const data = state.ws.tickerData.map(item => {
            const diff = item.upbit.closePrice - item.binance.closePrice * krwRate.value;
            const rate = diff / (item.binance.closePrice * krwRate.value);

            return {
                ...item,
                symbol: `${item.symbol}`.replace('USDT', ''),
                rate,
                diff: {
                    value: diff,
                    rate: rate * 100,
                },
            };
        });

        if (sort.value) {
            const { prop, order } = sort.value;

            if (order === 'ascending') {
                return data.sort((a, b) => a[prop] - b[prop]);
            }

            return data.sort((a, b) => b[prop] - a[prop]);
        }

        return data;
    }
});

const vAnimation = {
    updated: (el, binding) => {
        const { value, oldValue } = binding;
        const diff = value - oldValue;
        const parent = el.parentNode.parentNode.parentNode;
        const name = parent.className.replace(/ (up|down)\-animation$/, '');

        if (diff > 0) {
            parent.className = `${name} up-animation`;
        }

        if (diff < 0) {
            parent.className = `${name} down-animation`;
        }

        setTimeout(() => {
            parent.className = name;
        }, 1000);
    },
};

const sortChange = (val) => {
    console.log(val);
    sort.value = val;
};

onMounted(async () => {
    await dispatch(types.SET_TIMEOUT_RATE);
    dispatch(types.INIT_TICKER_WS);
});
</script>

<style lang="scss" scoped>
.text-upbit {
    color: #093687;
}

.text-binance {
    color: #f4bc0c;
}

.ticker-table {
    :deep() {
        thead {
            th {
                @extend %text-primary;
            }
        }

        .cell {
            padding: 5px;
        }

        tr {
            &.up-animation {
                animation: upFlash 1s;
            }

            &.down-animation {
                animation: downFlash 1s;
            }
        }
    }
}

@keyframes downFlash {
    0% {
        background-color: rgba(24, 147, 127, 0.1);
    }

    100% {
        background-color: transparent;
    }
}

@keyframes upFlash {
    0% {
        background-color: rgba(229, 30, 64, 0.1);
    }

    100% {
        background-color: transparent;
    }
}
</style>
